<template>
  <div class="bottombar">
    <div class="content">
        <div class="title">
          <p>下载音乐(共{{ songList.length }}首)</p>
        </div>
        <div class="cont" v-if="songList.length>0">
            <div class="contItem" v-for="(item,index) in songList" :key="index">
              <div class="left">
                <img src="../../assets/milaoshu.jpg" alt="">
                <div class="song">
                  <p>{{ item.songName }}</p>
                  <p>{{ item.singer }}</p>
                </div>
              </div>
              <div class="right">
                <img src="../../assets/bofang.png" alt="">
                <img src="../../assets/gengduo.png" alt="">
              </div>
            </div>
        </div>
        <div class="cont" v-else>
            <div class="empty">
              <h3>暂无下载的音乐</h3>
              <el-button type="primary">上传本地音乐</el-button>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
      return {
          songList:[],
      };
  },
}
</script>
<style lang="scss" scoped>
 .bottombar{
    width:calc(100vw - 230px);
  }
  .cont::-webkit-scrollbar {
    width: 0;
  }
   .cont{
      overflow-y:auto;
      height:calc(100vh - 160px);
      .empty{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin-top:100px;
      }
      .contItem{
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-top:1px solid #f0f0f0;
        .left{
          display:flex;
          align-items:center;
          img{
            width:30px;
            height:30px;
          }
          .song{
            margin-left:10px;
            line-height:20px;
            p{
              font-size:12px;
            }
            p:nth-child(2){
              margin-top:-10px;
            }
          }
        }
        .right{
          img{
            margin:0 10px;
            width:20px;
            height:20px;
          }
        }
      }
    }
</style>
